import { defineStore } from 'pinia'
export const themeStore = defineStore('theme', {
    state: (): any => ({
        theme: 'light',
        '--back': '#ffffff',
        '--text': '#1e1e1e'
    }),
    persist: true,
    actions: {
        changeTheme() {
            if (this.theme === 'dark') {
                this.theme = 'light'
                this['--text'] = '#1e1e1e'
                this['--back'] = '#ffffff'
            } else {

                this.theme = 'dark'
                this['--back'] = '#1e1e1e'
                this['--text'] = '#ffffff'
            }
            this.setGlobal()
        },
        setGlobal() {
            const htmlDom: any = document.querySelector('html')
            if (this.theme == 'dark') {
                htmlDom.className = 'dark'
            } else {
                htmlDom.className = ''
            }
            document.documentElement.style.setProperty('--back', this['--back'])
            document.documentElement.style.setProperty('--text', this['--text'])
        }
    },
})
